<template>
  <demo-content :title="title">
    <p>
      在某一时刻，canvas 中只能有一条路径存在，Canvas
      规范将其称为“当前路径”(current
      path)。然而，这条路径却可以包含许多子路径(subpath)。
      而子路径是由两个或更多的点组成的。
    </p>
    <canvas ref="canvasRef" width="600" height="400"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "路径与子路径";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  // 绘制路径
  ctx.beginPath();
  ctx.strokeStyle = "green";
  ctx.rect(30, 30, 100, 100);
  ctx.stroke();
  // 如果没有下面的beginPath，在绘制了第二个矩形后，当前路径会包含两个
  // 矩形子路径，使用 stroke 后，第一个矩形会被重绘，因此会创建2个红色矩形
  // 如果加了 beginPath，将所有的子路径从当前路径中清除
  // 下面的 stroke 操作对应的只有第二个矩形，第一个矩形不会重绘，保持绿色
  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.rect(200, 200, 100, 100);
  ctx.stroke();
});
</script>

<style src="./default.css" scoped></style>
